import { t } from 'i18next'
import dayjs from '@/plugins/dayjs'
import { useRequest } from 'ahooks'
import React, { useEffect, useMemo, useState } from 'react'
import { useGlobalStore } from '@/store/global'
import Calendar from './Calendar'
import CalendarDatePicker from './CalendarDatePicker'
import { fetchCalendarList } from '@/api/myMeeting'
import { MeetingInfo } from '@/api/myMeeting/interface'
import { transMeetingListParam } from '@/api/myMeeting/translator'
import { NextIcon, PrevIcon, StyledWrap } from './style'
import useInit from '@/hooks/useInit'
import MeetingHeader from '@/components/MeetingHeader'
import ScheduleTab from '@/components/ScheduleTab'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import { fetchKisCookie } from '@/api/global'

export default function App() {
	useInit()
	const serverInfo = useGlobalStore((state) => state.serverInfo)
	const user = useGlobalStore((state) => state.user)
	const [list, setList] = useState<MeetingInfo[]>([])
	/*
	serverInfo?.system_date   2024-06-25T11:06:31+08:00

	解析传入的 ISO 8601 (opens new window)格式的字符串并返回一个 Day.js 对象实例。
	dayjs('2018-04-04T16:00:00.000Z')

	------------------------------

	*/
	const [selectedDate, setSelectedDate] = useState(dayjs(serverInfo?.system_date))
	const startTime = useMemo(
		() => (selectedDate.weekday() === 6 ? selectedDate.subtract(6, 'day') : selectedDate.day(1)),
		[selectedDate]
	)
	const endTime = useMemo(() => startTime.add(6, 'day'), [startTime])

	useEffect(() => {
		if (serverInfo?.enable_kis && user?.enable_kis) {
			fetchKisCookie()
		}
	}, [serverInfo, user])

	const { data, loading } = useRequest(
		() =>
			fetchCalendarList(
				startTime.startOf('day').format('YYYY-MM-DD HH:mm:ss'),
				endTime.endOf('day').format('YYYY-MM-DD HH:mm:ss')
			),
		{
			refreshDeps: [startTime, endTime],
		}
	)
	useEffect(() => {
		if (data && !loading) {
			setList(transMeetingListParam(data))
		}
	}, [data, loading])
	const handlePrev = () => {
		setSelectedDate(startTime.subtract(7, 'day'))
	}
	const handleNext = () => {
		setSelectedDate(startTime.add(7, 'day'))
	}
	return (
		<>
			<WebRecommendBrowser />
			<MeetingHeader tabIndex={1} />
			<ScheduleTab tabIndex={2} />
			<StyledWrap className="my-meeting-wrap">
				<div className="right-wrap">
					<div className="title">{dayjs(serverInfo?.system_date).format(t('YYYY年MM月DD日'))}</div>
					<CalendarDatePicker selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
					<div className="meeting-category">
						<div className="category-title">
							<span className="icon mine" />
							{t('会议分类')}
						</div>
						<div className="category">
							<span className="icon mine" />
							{t('我发起的会议')}
						</div>
						<div className="category">
							<span className="icon participate" />
							{t('我参与的会议')}
						</div>
						<div className="category">
							<span className="icon expired" />
							{t('已过期的会议')}
						</div>
						<div className="category">
							<span className="icon not-approved" />
							{t('未审批通过的会议')}
						</div>
						<div className="category">
							<span className="icon approving" />
							{t('审批中的会议')}
						</div>
					</div>
				</div>
				<div className="left-wrap">
					<div className="day-picker">
						<PrevIcon onClick={handlePrev} />
						<span className="text">
							{startTime.format(t('MM月DD日'))}~{endTime.format(t('MM月DD日'))}
						</span>
						<NextIcon onClick={handleNext} />
					</div>
					<div className="view-content">
						<Calendar systemDate={serverInfo?.system_date ?? ''} meetingList={list} startTime={startTime} />
					</div>
				</div>
			</StyledWrap>
		</>
	)
}
